<template>
  <el-select
    :value="currentProjectId"
    @change="projectSelect"
    placeholder="请选择项目">
    <template slot="prefix">
      <span class="prefixSlot">当前项目</span>
    </template>
    <el-option
      v-for="project in projectList"
      :key="project.id"
      :label="project.name"
      :value="project.id">
      <span style="float: left">{{ project.name }}</span>
      <span style="float: right; color: #8492a6; font-size: 13px">{{ project.id }}</span>
    </el-option>
  </el-select>
</template>

<script>
export default {
  name: 'ProjectSelect',
  props: {
    projectList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      currentProject: undefined,
      currentProjectId: undefined
    }
  },
  computed: {
    projectMap () {
      let map = {}
      for (let project of this.projectList) {
        map[project.id + ''] = project
      }
      return map
    }
  },
  methods: {
    projectSelect (value) {
      let project = this.projectMap[value + '']
      this.currentProject = project
      this.currentProjectId = project.id
      this.$store.commit('SET_CURRENT_PROJECT_DATA', project)
      this.$store.commit('SET_CURRENT_PROJECT', value)
      this.$emit('onSelect', project)
    }
  },
  watch: {
    projectList: {
      handler: function (newVal, oldVal) {
        this.projectList = newVal
        this.currentProject = undefined
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-select >>> .el-input--prefix .el-input__inner {
  padding-left: 110px;
}
.prefixSlot {
  height: 36px;
  width: 90px;
  display: block;
  line-height: 36px;
  border-right: 1px solid #f1f1f1;
}
</style>
